<template>
  <div>
	  <el-dialog
	    :title="dTitle"
	    :visible.sync="centerDialogVisible"
		:close-on-click-modal="false"
		:close-on-press-escape="false"
		:show-close="false"
	    width="30%"
	    center>
			<!-- 登录 -->
			<el-form v-show="loginOrRegist" ref="form"  label-width="80px">
				<el-form-item label="用户名">
			      <el-input
			      	placeholder="请输入用户名"
			      	v-model="username">
			      </el-input>
			    </el-form-item>
				<el-form-item label="密码">
				    <el-input
				    	placeholder="请输入密码" 
				    	v-model="password"  
				    	show-password>
				    </el-input>
				</el-form-item>
			</el-form>
			<!-- 注册 -->
			<el-form v-show="!loginOrRegist" ref="regin"  label-width="80px">
				<el-form-item label="用户名">
			      <el-input
			      	placeholder="请输入用户名"
			      	v-model="username">
			      </el-input>
			    </el-form-item>
				<el-form-item label="密码">
				    <el-input
				    	placeholder="请输入密码" 
				    	v-model="password"  
				    	show-password>
				    </el-input>
				</el-form-item>
				<el-form-item
				    prop="email"
				    label="邮箱"
				    :rules="[
				      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
				      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
				    ]"
					v-model="email"
				  >
				    <el-input v-model="password"></el-input>
				  </el-form-item>
				<el-form-item label="邮箱验证">
				    <el-input style="width: 60%; margin-right: 15px;" v-model="code"></el-input><el-button @click="sendEmailCode">获取验证码</el-button>
				  </el-form-item>
			</el-form>
	    	
		
	    <span slot="footer" class="dialog-footer">
	      <el-button @click="clickDialog(0)">取 消</el-button>
	      <el-button type="primary" @click="clickDialog(1)">确 定</el-button>
		  <el-row v-if="loginOrRegist" class="wj-zm-footer">
		  	<el-col :xs="12" :sm="12" :md="12">还没有账号？<span @click="clickDialog(2)" class="wj-zm-footer-zc">免费注册</span></el-col>
		  	<el-col class="wj-zm-footer-zc wj-zm-footer-mm" @click="clickDialog(4)" :xs="12" :sm="12" :md="12">忘记密码</el-col>
		  </el-row>
		  <el-row v-if="!loginOrRegist" class="wj-zm-footer">
		  	<el-col class="wj-zm-footer-mm" :xs="24" :sm="24" :md="24">
				已有账号？ <span @click="clickDialog(3)" class="wj-zm-footer-zc">立即登录</span>
			</el-col>
		  </el-row>
	    </span>
		
	  </el-dialog>
  </div>
</template>
<script>
	import axios from "axios";
	import * as url from '../utils/global.js'
    export default {
        name: 'Login',
		props: {
		    centerDialogVisible: {
		      required: false,
		      default: false,
		    },
			isLogin: {
			  required: false,
			  default: true,
			},
			title: {
			  required: false,
			  default: "欢迎登录",
			},
		    
		},
        data () {
            return {
				username: "",
				password: "",
				email: '',
				code: "",
				loginOrRegist: true,
				dTitle: ""
            }
        },
		methods:{
			clickDialog(e) {
				if(e == 2){
					this.loginOrRegist = false
					this.dTitle = "欢迎注册"
					
				} else if (e == 3){
					this.loginOrRegist = true
					this.dTitle = "欢迎登录"
				}
				const data = {"index": e, "username":this.username, "password":this.password}
				this.$emit('click', data)
				
			},
			/* 发送验证码 */
			sendEmailCode(){
				axios.get(url.baseUrl + "/user/send_code", { 
					params: { email: this.email } ,
				})
				.then((res) => {
					this.$message({
					message: "验证码发送成功",
					type: "success",
					duration: 1500,
					});
				})
				.catch((res) => {
				  this.$message.error(res.data.data);
				});
			},
			/* 注册 */
			regist(){
				const params = {
				  "username": "string",
				  "password": "string",
				  "code": "string"
				}
				axios.post(url.baseUrl + "/user/register", params)
				.then((res) => {
					this.$message({
					message: "验证码发送成功",
					type: "success",
					duration: 1500,
					});
				})
				.catch((res) => {
				  this.$message.error(res.data.data);
				});
			},
			
			
		},
		watch: {
		    isLogin(val){
				this.loginOrRegist = val
			},
			title(val){
				this.dTitle = val
				console.log("监听数据：" + this.dTitle)
			},
		}
		
		
    }
</script>

<style scoped>
	.wj-zm-footer {
		margin-top: 20px;
		font-size: 12px!important;
		text-align: left;
	}
	.wj-zm-footer-zc {
		color: #0056ff;
	}
	.wj-zm-footer-mm {
		text-align: right;
	}
  
</style>